@(title: String, width: Int = 700, submitLabel: String = "OK", secondaryLabel: String = "Secondary Button")(content: Html)

<div class="mdl-dialog__title">
  <strong class="mdl-dialog__title-text">@title</strong>
  <div id="dialog-progress-spinner" class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</div>
<div class="dialog__error-msg">
  <div class="mdl-alert mdl-alert--danger mdl-alert--border mdl-alert--spacing">
    <div class="mdl-alert__content">
      Error message.
    </div>
  </div>
</div>
<form id="dialog-form" action="javascript:submit();" enctype="multipart/form-data">
  <div class="mdl-dialog__content">
  @content
  </div>
  <div class="mdl-dialog__actions">
    <button id="dialog-submit-button" type="submit" class="mdl-button mdl-js-button mdl-button--accent">@submitLabel</button>
    <button id="dialog-secondary-button" type="button" class="mdl-button mdl-js-button mdl-button--accent" style="display: none;">@secondaryLabel</button>
    <button id="dialog-cancel-button" type="button" class="mdl-button mdl-js-button mdl-button--accent close">Cancel</button>
  </div>
</form>
<script>
  primary_dialog.querySelector('.close').addEventListener('click', function() {
    primary_dialog.close();
  });
  primary_dialog.querySelector('#dialog-secondary-button').addEventListener('click', function() {
    dialog_secondary();
  });
  $(".dialog__error-msg").click(function() { $(this).fadeToggle(); });
</script>

